<template>
	<view class="good-list">
		<uni-list v-for="(item,index) in list" :key="index">
			<uni-list-item  showArrow>
				<template slot="body" >
					<view class="imagewarp">
						<u-image @click="previewImge(item)" class="image" width="120rpx" height="120rpx" :src="item.faceImgUrl?item.faceImgUrl+'?Authorization='+userInfo.token+'&us=app&width=100':'../../../static/image/icon/renlian.png'"></u-image>
					</view>
					<view class="u-cell-group" @click="navigetTo(item)" >
						<view class="u-cell-item">
							<text class="title">{{item.userName}}</text> {{item.useCount}}次<u-tag :text="item.deviceName" mode="dark"/>
						</view>
						<view class="u-cell-item">
							<u-icon name="map"></u-icon>
							<view class="title lz-ellipsis-1" style="width: 500rpx;">{{item.location}}</view>
						</view>
						<view class="u-cell-item">
							<u-icon name="clock"></u-icon>
							<text class="title">{{item.realTime}}</text>
						</view>
						
						<view class="u-cell-item">
							<!-- {descrition: "审批模式", code: 1}
							{descrition: "指纹模式", code: 2}
							{descrition: "装章模式", code: 4}
							{descrition: "密码模式", code: 5}
							{descrition: "静默模式", code: 9} -->
							<u-tag v-if="item.model" :text="item.model" type="success" mode="light"/>
							<!-- 兼容1.0后台 -->
							<!-- 使用记录类型 0:申请单模式 1:申请单模式(量子) 2:指纹模式 3:指纹模式(量子)4:密码模式 -->
							<u-tag v-else :text="$lizhao.computeType.getTypeName(item.type)" type="success" mode="light"/>
						</view>
						<view class="image-warp">
							<u-image class="item-image" :src="computeError(item.error)" width="150rpx" height="150rpx"></u-image>
						</view>
					</view>
					
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
			computeError() {
				return (error) => {
					if (error == -1) {
						return '/static/image/icon/yichang.png'
					} else if (error == 0) {
						return '/static/image/icon/zhengchang.png'
					} else if (error == 1) {
						return '/static/image/icon/jinggao.png'
					}else if (error == 3) {
						return '/static/image/icon/zuofei.png'
					}
				}
			}
		},
		props: {
			list: {
				type: [Array],
				default () {
					return []
				}
			},
			option: { //当前页面信息，从哪里点进的
				type: Object,
				default () {
					return {}
				}
			},
			titleId: { //当前tab名称
				type: [Number,String],
				default () {
					return ''
				}
			},
		},
		data() {
			return {}
		},
		mounted() {
			that = this
		},
		methods: {
			navigetTo(item){
				item.deviceType=this.titleId
				uni.navigateTo({
					url: '/pages/application/useDetails/useDetails?data='+encodeURIComponent(JSON.stringify(item)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			previewImge(row){
				if(row.faceImgUrl){
					uni.previewImage({
						urls: [row.faceImgUrl+'?Authorization='+this.userInfo.token+'&us=web']
					});
				}
			}
		}

	}
</script>

<style lang="scss">
	.good-list {
		background-color: #fff;
		width: 100%;
		.imagewarp{
			display: flex;align-items: center;margin-right: 5px;
		}
		.u-cell-group{
			font-size: 28rpx;
			.u-cell-item{
				padding: 10rpx 0;box-sizing: border-box;z-index: 10;display: flex;position: relative;
				.title{
					margin-right: 10rpx;
				}
			}
			.image-warp{
				position: absolute;right: 40rpx;top: 20%;z-index: 1;
			}
		}
		
		
	}
</style>
